<template>
<div id="root">
  姓：<input type="text" v-model="firstName"><br><br>
  名：<input type="text" v-model="lastName"><br><br>
  姓名：<span>{{fullName}}</span>
</div>
</template>

<script>
export default {
  name: "JiSuanShuXing",
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + '-' + this.lastName
      },
      //修改
      set(value) {
        const arr = value.split('-')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  }
}
</script>

<style scoped>

</style>
